<template>
  <!-- 页脚 -->
  <mt-tabbar v-model="selected" fixed>
    <mt-tab-item id="home" href="#/home">
      <img slot="icon" src="../../images/shouye.png">
      首页
    </mt-tab-item>
    <mt-tab-item id="会员" href="#/vip">
      <img slot="icon" src="../../images/sousuo.png">
      vip
    </mt-tab-item>
    <mt-tab-item id="shopping-cart" href="#/shopping-cart">
      <img slot="icon" src="../../images/gouwuche.png">
      <span class="mui-badge">0</span>
      购物车
    </mt-tab-item>
    <mt-tab-item id="about-me" href="#/about-me">
      <img slot="icon" src="../../images/wode.png">
      我的
    </mt-tab-item>
  </mt-tabbar>
</template>

<script>
export default {
  data () {
    return {
      selected: this.$route.path.substring(1),
    }
  },
  watch: {
    // 实现路由跳转
    // selected: function (val, oldVal) {
    //   this.$router.push({ path: val });
    //   // console.log(this.$router.history);
    // }
  }
}
</script>

<style lang="scss" scoped>
.mui-badge {
  position: absolute;
  right: 109px;
  bottom: 37px;
  background-color: red;
  color: #fff;
}
</style>

